<template>
  <div class="body">
    <div class="title">
      舆情热词
    </div>
    <div
      ref="wordCloud"
      class="chart"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { getWordList } from '@/api/article/article'
export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      getWordList({
        categoryId: 5
      }).then(res => {
        this.dataList = res.data
        console.log(this.dataList)
        this.drawLineChart()
      })
    },
    drawLineChart() {
      const chartDom = this.$refs.wordCloud
      const myChart = echarts.init(chartDom)
      const option = {
        series: {
          type: 'wordCloud',
          shape: 'circle',
          keepAspect: false,
          // maskImage: maskImage,
          left: 'center',
          top: 'center',
          width: '100%',
          height: '90%',
          right: null,
          bottom: null,
          sizeRange: [12, 60],
          rotationRange: [-90, 90],
          rotationStep: 45,
          gridSize: 25, // 词典字体间距配置
          drawOutOfBound: false,
          layoutAnimation: true,
          textStyle: {
            normal: {
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              color: function() {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')'
              }
            }
          },
          emphasis: {
            // focus: 'self',
            textStyle: {
              textShadowBlur: 3,
              textShadowColor: '#333'
            }
          },
          // 渲染词典数据
          data: this.dataList
        }
      }
      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
}

.title {
  font-weight: bold;
  font-size: 20px;
  color:#666;
}
.chart {
  width: 80%;
  margin:0 auto;
  height: 90%;
}
</style>
